<!DOCTYPE HTML>
<html>

<head>
    <title>behaviour-custom</title>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #333333;
            margin: 0px;
            overflow: hidden;
        }
        
        #container {
            width: 800px;
            height: 800px;
        }
        
        canvas {
            background: #000000;
        }
        
        .shadow {
            box-shadow: 0 0 10px #000;
        }
    </style>
</head>

<body>
    <div id="container">
    </div>
    <script src="/js/proton.js"></script>
    <script src="/js/Stats.min.js"></script>
    <script src="/js/color.min.js"></script>
    <script src="/js/spritejs.js"></script>
    <script src="https://s5.ssl.qhres.com/!b113a2f5/sprite-extend-proton.js"></script>
    <script>
      const {Scene, ProtonRenderer} = spritejs
      const scene = new Scene('#container', {
        viewport: ['auto', 'auto'],
      })
      const layer = scene.layer('fglayer', {
        shadowContext: false,
        autoRender: false,
      })

      /* eslint-disable */
        var proton;
        var emitter;
        var colors;
        var stats;
        var hcolor = 0;
        
        var colorBehaviour;
        var circleBehaviour;
        var _currentBehaviour;
        var rouletteBehaviour;
        var _over = false;
        main();
        function main() {
            addStats();
            customCircleBehaviour();
            customRouletteBehaviour();
            createProton();
            tick();
        }
        function addStats() {
            stats = new Stats();
            stats.setMode(2);
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById('container').appendChild(stats.domElement);
        }
        function createProton() {
            proton = new Proton;
            emitter = new Proton.Emitter();
            emitter.rate = new Proton.Rate(1, .3);
            emitter.addInitialize(new Proton.Mass(1));
            emitter.addInitialize(new Proton.Radius(3));
            emitter.addBehaviour(new Proton.Alpha(1, 0));
            var color = Color.parse("hsl(" + hcolor + ", 100%, 50%)").hexTriplet();
            colorBehaviour = new Proton.Color(color);
            emitter.addBehaviour(colorBehaviour);
            emitter.addBehaviour(circleBehaviour);
            _currentBehaviour = circleBehaviour;
            emitter.p.x = scene.resolution[0] / 2;
            emitter.p.y = scene.resolution[1] / 2;
            emitter.emit();
            proton.addEmitter(emitter);
            setInterval(function() {
                hcolor++;
                var color = Color.parse("hsl(" + (hcolor % 360) + ", 100%, 50%)").hexTriplet();
                colorBehaviour.reset(color);
            }, 100);
            proton.addRenderer(createRender());
            proton.addEmitter(addDot());
        }
        function addDot() {
            var emitter = new Proton.Emitter();
            emitter.rate = new Proton.Rate(new Proton.Span(2, 4), new Proton.Span(.05, .2));
            emitter.addInitialize(new Proton.Mass(1));
            emitter.addInitialize(new Proton.Radius(10, 30));
            emitter.addInitialize(new Proton.Life(2, 4));
            emitter.addInitialize(new Proton.Position(new Proton.RectZone(0, 0, ...scene.resolution)));
            emitter.addBehaviour(new Proton.Alpha(0, .4, Infinity, Proton.easeOutCubic));
            emitter.addBehaviour(new Proton.Scale(1, 0, Infinity, Proton.easeOutCubic));
            emitter.addBehaviour(new Proton.Color('random'));
            emitter.emit();
            return emitter;
        }
        function createRender() {
            const _clearContext = layer.clearContext
            layer.clearContext = function(context) {
              const [width, height, offsetLeft, offsetTop] = this.resolution
              context.fillStyle = "rgba(0, 0, 0, 0.03)";
              context.fillRect(offsetLeft, offsetTop, width, height);
            }
            var renderer = new ProtonRenderer(layer);
            renderer.onProtonUpdate = function() {
              layer.draw()
            };
            return renderer;
        }
        // function createRender() {
        //     const canvas = layer.canvas,
        //       context = canvas.getContext('2d')
        //     var renderer = new Proton.CanvasRenderer(canvas);
        //     renderer.onProtonUpdate = function() {
        //         context.fillStyle = "rgba(0, 0, 0, 0.03)";
        //         context.fillRect(0, 0, canvas.width, canvas.height);
        //     };
        //     return renderer;
        // }      
        function customCircleBehaviour() {
            circleBehaviour = {
                dead: false,
                initialize: function(particle) {
                    particle.theta = 0;
                },
                applyBehaviour: function(particle) {
                    if (!this.dead) {
                        particle.theta += Math.PI / 200;
                        var b = 100;
                        var a = 62.5;
                        particle.p.x = emitter.p.x + (a + b) * Math.cos(particle.theta) - b * Math.cos((a / b + 1) * particle.theta)
                        particle.p.y = emitter.p.y + (a + b) * Math.sin(particle.theta) - b * Math.sin((a / b + 1) * particle.theta)
                        if (particle.theta > Math.PI * 16 * 3) {
                            particle.dead = true;
                            _over = true;
                            changeBehaviour(rouletteBehaviour);
                        }
                    }
                }
            }
        }
        function customRouletteBehaviour() {
            rouletteBehaviour = {
                dead: false,
                initialize: function(particle) {
                    particle.theta = 0;
                },
                applyBehaviour: function(particle) {
                    if (!this.dead) {
                        particle.theta += Math.PI / 150;
                        var a = 280;
                        var b = 392;
                        var c = 124;
                        particle.p.x = emitter.p.x + (a - b) * Math.cos(particle.theta) + c * Math.cos((a / b - 1) * particle.theta);
                        particle.p.y = emitter.p.y + (a - b) * Math.sin(particle.theta) - c * Math.sin((a / b - 1) * particle.theta);
                        if (particle.theta > Math.PI * 14 * 2) {
                            particle.dead = true;
                            _over = true;
                            changeBehaviour(circleBehaviour);
                        }
                    }
                }
            }
        }
        function changeBehaviour(be) {
            if (_over) {
                emitter.removeAllParticles();
                emitter.removeBehaviour(_currentBehaviour);
                emitter.addBehaviour(be);
                _currentBehaviour = be;
                _over = false;
            }
        }
        function tick() {
            requestAnimationFrame(tick);
            stats.begin();
            proton.update();
            stats.end();
        }
    </script>
</body>

</html>